<template>
  <view class="all">
    <view class="tips">
      <u-icon name="error-circle-fill" color="#ff6666" size="14"></u-icon>
      <text style="margin-left: 5rpx">请仔细核对识别后的文字，点击可修改</text>
    </view>
    <view class="content">
      <view class="r_addr_input">
        <view class="addr_input">
          <u-textarea
            v-model="copyContent"
            confirmType="return"
            border="none"
            :maxlength="-1"
            :placeholderStyle="{
              fontSize: '26rpx',
            }"
            placeholder="粘贴信息，自动拆分姓名、电话和地址，如有多个地址，用英文逗号‘,’分割"
          ></u-textarea>
        </view>
        <!-- <u-button type="primary" color="#ff0000" text="识别" @click="makeAnyAddr"></u-button> -->
        <!-- <u-button type="primary" text="识别" @click="makeAnyAddr"></u-button> -->
        <view class="identify" @click="makeAnyAddr">识别</view>
      </view>

      <view class="addrs">
        <text class="title" v-if="addrResult?.length > 0">识别结果</text>
        <u-form labelPosition="left" ref="form1" labelWidth="80">
          <view ref="addrItem" class="addr_item" v-for="(item, index) in addrResult" :key="index">
            <view class="addr_option">
              <view class="addr_index">{{ index + 1 }}</view>
              <view class="addr_del" @click="delAddr(index)"> 删除 </view>
            </view>

            <view class="addr_content">
              <view style="display: flex; margin-top: 0rpx">
                <view style="width: 30%">
                  <u-form-item prop="userInfo.name" ref="item1" border-bottom>
                    <u-input
                      v-model="item.realName"
                      placeholder="请填写收货人姓名"
                      border="false"
                      class="input"
                      fontSize="12"
                      :customStyle="{ fontWeight: '600', paddingTop: '5rpx', paddingBottom: '5rpx' }"
                    ></u-input>
                  </u-form-item>
                </view>

                <view style="width: 70%">
                  <u-form-item prop="userInfo.name" ref="item1" border-bottom>
                    <u-input
                      v-model="item.phone"
                      fontSize="12"
                      placeholder="请填写收货联系电话"
                      border="false"
                      :customStyle="{ fontWeight: '600', paddingTop: '5rpx', paddingBottom: '5rpx' }"
                    ></u-input>
                  </u-form-item>
                </view>
              </view>

              <u-form-item prop="userInfo.name" ref="item1" border-bottom>
                <u-input
                  v-model="item.region"
                  fontSize="12"
                  placeholder="请填写收货行政区"
                  border="false"
                  :customStyle="{ fontWeight: '600', paddingTop: '5rpx', paddingBottom: '5rpx' }"
                ></u-input>
              </u-form-item>

              <u-form-item prop="userInfo.name" ref="item1">
                <view class="textarea">
                  <u-textarea
                    v-model="item.detail"
                    autoHeight
                    :maxlength="-1"
                    confirmType="return"
                    fontSize="12"
                    placeholder="请填写收货详细地址"
                    border="false"
                  ></u-textarea>
                </view>
              </u-form-item>
            </view>
          </view>
        </u-form>
      </view>
    </view>

    <view class="submit" v-if="addrResult?.length > 0">
      <view class="submit_btn" @click="submit"> 确定 </view>
      <!-- <u-button type="primary" text="完成" @click="submit"></u-button> -->
    </view>
  </view>
</template>

<script setup lang="ts">
import { nextTick, reactive, ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import AddressParse from "address-parse";

// 输入的地址
const copyContent = ref("");
// 解析之后的地址
const addrResult = ref([]);

// 提交地址
function submit() {
  uni.setStorageSync(goodsId.value, JSON.stringify(addrResult.value));
  uni.navigateBack();
}

// 解析多个地址
function makeAnyAddr() {
  copyContent.value = copyContent.value.replace("，", ",");
  const addrs = copyContent.value.split(",");

  addrs.forEach((item) => {
    analysis(item);
  });
}

// 识别地址
function analysis(addr: String) {
  // 获取剪贴板的内容
  const result = AddressParse.parse(addr)[0];
  let region = result.province + result.city + result.area;
  let realName = result.name;
  let phone = result.mobile;
  let detail = result.details;

  addrResult.value.push({
    region: region,
    realName: realName,
    phone: phone,
    detail: detail,
  });
  // 因为微信小程序会自带一个弹窗,所以可以选择覆盖或者是隐藏
  uni.hideToast();
}

const addrItem = ref();
// 删除地址
function delAddr(index) {
  addrResult.value.splice(index, 1);
}

const goodsId = ref();
onLoad((option) => {
  goodsId.value = option.goodsId;
  // copyContent.value =
  // "收件人: 朱振霈手机号码: 18668080757所在地区: 浙江省杭州市滨江区西兴街道详细地址: 月明路新州花苑东区15幢3单元2201,收件人: 沈韦婷手机号码: 18757191833所在地区: 浙江省杭州市上城区湖滨街道详细地址: 东羊血弄5幢203";
});

onShow(() => {
  // uni.setStorageSync("backgroundColor", jsonPage.value[0].backgroundColor);
  uni.setNavigationBarColor({
    frontColor: uni.getStorageSync("color"), //字体颜色
    backgroundColor: uni.getStorageSync("backgroundColor"), //背景颜色
  });

  if (uni.getStorageSync(String(goodsId.value))) {
    addrResult.value = JSON.parse(uni.getStorageSync(String(goodsId.value)));
  }
});
</script>

<style lang="scss" scoped>
.all {
  background-color: #f6f6f6;
  min-height: 100vh;
  padding-bottom: 100rpx;

  .addr_input {
    background-color: #fff;
  }

  .r_addr_input {
    background-color: #fff;
    padding: 30rpx;
    border-radius: 20rpx;
  }

  .addr_item {
    background-color: #fff;
    // padding: 0rpx 20rpx 10rpx 20rpx;
    margin-top: 10rpx;
    margin-bottom: 30rpx;
    border-radius: 20rpx;
    box-shadow: 0 0 5rpx rgba($color: #000000, $alpha: 0.1);
    opacity: 1;
    transition: opacity 0.3s ease-out;

    // :deep(.u-form-item) {
    //   height: 60rpx;
    // }
  }

  .addr_option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffd8d8;
    height: 70rpx;
    border-start-start-radius: 20rpx;
    border-start-end-radius: 20rpx;
    padding-left: 20rpx;
    padding-right: 20rpx;
    // border-top: 5rpx solid #ff94b6;
  }

  .addr_index {
    background-color: #ffaaaa;
    border-radius: 100rpx;
    color: #fff;
    width: 40rpx;
    height: 40rpx;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
    font-weight: 800;
  }

  .addr_del {
    width: 80rpx;
    // border: 1px solid #ff2828;
    border-radius: 10rpx;
    // color: #ff5151;
    color: #fff;
    background-color: #ff7b7b;
    font-size: 22rpx;
    padding: 5rpx 0;
    font-weight: 600;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
  }
}
.addrs {
  margin-top: 30rpx;
}

.addr_content {
  padding-left: 20rpx;
  padding-right: 20rpx;
}

.tips {
  background-color: rgb(255, 241, 164);
  color: #ff6666;
  display: flex;
  align-items: center;
  padding: 15rpx 20rpx 15rpx 20rpx;
  font-size: 22rpx;
}

.content {
  padding: 30rpx;
}

.title {
  font-size: 18rpx;
  color: #959595;
}

.submit {
  width: 100vw;
  height: 140rpx;
  position: fixed;
  bottom: 0;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}

.submit_btn {
  width: 50vw;
  height: 80rpx;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 32rpx;
  font-weight: 600;
  background: linear-gradient(to right, #ff7373, #ff3535);
  border-radius: 100rpx;
  box-shadow: 0 0 30rpx rgba($color: #ff7373, $alpha: 0.3);
}

.textarea {
  :deep(.u-textarea__field) {
    font-size: 24rpx;
    color: #303133;
    font-weight: 600;
    padding-left: 0;
    padding-right: 0;
  }
}

.identify {
  background-color: #ff3535;
  color: #fff;
  font-size: 26rpx;
  font-weight: 600;
  border-radius: 100rpx;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 60rpx;
}
</style>
